<template>
	<view class="person-container">
		<person-item v-if="operatorList" :operatorList="operatorList" @detail="goOperatorDetail" @leave="goAskLeave"></person-item>
		<view v-else>
			<van-empty description="暂无人员" />
		</view>
	</view>
</template>

<script>
	import PersonItem from '@/components/personItem.vue'
	export default {
		components: {
			PersonItem
		},
		data() {
			return {
				ticketType: this.$type.ticketType,
				workStatus: this.$type.workStatus,
				status: 'more',
				params: {
					姓名: null,
					身份证号: null,
					所属单位: null,
					人员类型: null,
					负责项目: null,
					负责工单类型: null,
					电话: null,
					状态: 1,
					pagination: {
						current: 1,
						pageSize: 1000
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				operatorList: [],
				typeList: [],
				haveMore: true
			}
		},
		// onReachBottom() {
		// 	if (this.haveMore) {
		// 		this.getMoreOperatorList()
		// 	}
		// },
		// onReachBottom() {
		// 	console.log('触发上拉')
		// 	if (this.status !== 'noMore' && this.operatorList) {
		// 		this.status = 'loading'
		// 		this.getMoreOperator()
		// 	}
		// },
		onLoad(options) {
			this.params.所属单位 = uni.getStorageSync('currentUnitId')
			// this.getOperatorList()
		},
		onShow() {
			this.getOperatorList()
		},
		methods: {
			goAskLeave(item) {
				uni.navigateTo({
					url: '../askLeave/askLeave?item=' + JSON.stringify(item)
				})
			},
			getOperatorList() {
				this.$http2.post('worksys/worker/list', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						// console.log(res)
						this.operatorList = res.data.list.filter(item => item.人员类型 !== 3)
						this.operatorList.forEach(operator => {
							if(operator.负责工单类型 !== null) {
								operator.负责工单类型 = operator.负责工单类型.map(item => this.$type.ticketType[item])
							}
							// operator.负责工单类型 = operator.负责工单类型.map(item => this.$type.ticketType[item])
						})
						// this.operatorList = res.data.list.filter(item => item.人员类型 !== 3)
						if (this.operatorList.length === res.data.total) {
							this.status = 'noMore'
						}
					}
				})
			},
			getMoreOperator() {
				this.params.pagination.current++
				this.$http2.post('worksys/worker/list', this.params).then(res => {
					if (res.code === 10000) {
						if(res.data.list !== null) {
							res.data.list = res.data.list.filter(item => item.人员类型 !== 3)
							res.data.list.forEach(operator => {
								if(operator.负责工单类型 !== null) {
									operator.负责工单类型 = operator.负责工单类型.map(item => this.$type.ticketType[item])
								}
								// operator.负责工单类型 = operator.负责工单类型.map(item => this.ticketType[item])
							})
						}
						// this.operatorList.push(...res.data.list)
						this.operatorList = this.operatorList && this.operatorList.concat(res.data.list)
						if (this.operatorList.length === res.data.total) {
							this.status = 'noMore'
						}
					}
				})
			},
			// getMoreOperatorList() {
			// 	uni.showLoading()
			// 	this.params.pagination.current++
			// 	this.$http2.post('worksys/worker/list', this.params).then(res => {
			// 		console.log(res, '加载更多')
			// 		if (res.code === 10000) {
			// 			if (res.data.list == null) {
			// 				this.haveMore = false
			// 				return
			// 			}
			// 			res.data.list.forEach(operator => {
			// 				operator.负责工单类型 = operator.负责工单类型.map(item => this.$type.ticketType[item])
			// 			})
			// 			this.operatorList.push(...res.data.list)
			// 		}
			// 	})
			// },
			goOperatorDetail(id) {
				uni.navigateTo({
					url: '../personDetail/personDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.person-container {
		background-color: #f5f6f7;
		height: 100vh;

		.record-item {
			width: 690rpx;
			height: 282rpx;
			background-color: #fff;
			box-shadow: 0px 1rpx 11rpx 1rpx #EEEEEE;
			border-radius: 8rpx;
			margin-top: 20rpx;
			margin-left: 30rpx;

			.item-title {
				display: flex;
				justify-content: space-between;
				padding-right: 20rpx;
				width: 100%;
				height: 71rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				position: relative;

				// padding-top: 10rpx;
				.left-border {
					width: 6rpx;
					height: 30rpx;
					background-color: #1064E9;
					position: absolute;
					left: 0;
					top: 20rpx;
				}

				.left {
					padding-left: 30rpx;
					color: #333;
					font-weight: bold;
					// margin-right: 230rpx;
				}

				.right {
					color: #333;
					font-size: 28rpx;
				}

				.compete {
					color: #83D065;
					width: 82rpx;
					height: 36rpx;
					font-size: 22rpx;
					border: 2rpx solid #83D065;
					text-align: center;
				}
			}

			.item-content {
				color: #666;
				padding: 20rpx 30rpx;
				font-size: 28rpx;

				.content-top {
					margin-bottom: 16rpx;
					display: flex;
					justify-content: space-between;

					.handle {
						width: 100rpx;
						height: 45rpx;
						line-height: 45rpx;
						font-size: 24rpx;
						text-align: center;
					}

					.normal {
						background: #1152FC;
						color: #fff;
					}

					.forbid {
						color: red;
						border: 2rpx solid red;
					}
				}

				.content-center {
					margin-bottom: 20rpx;
					// display: flex;
					// justify-content: space-between;
					width: 20em;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.transfer {
						width: 82rpx;
						height: 36rpx;
						// background: #1152FC;
						color: #1152FC;
						font-size: 22rpx;
						border: 2rpx solid #1152FC;
						text-align: center;
					}
				}

				.content-bottom {
					display: flex;
					justify-content: space-between;

					.transfer {
						width: 82rpx;
						height: 36rpx;
						// background: #1152FC;
						color: #1152FC;
						font-size: 22rpx;
						border: 2rpx solid #1152FC;
						text-align: center;
					}

					.type {
						overflow: hidden; //超出的隐藏
						text-overflow: ellipsis; //省略号
						white-space: nowrap; //强制一行显示
					}
				}
			}
		}
	}
</style>
